<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="/js/lib/bootstrap3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/js/lib/slide/css/simple.slide.css">
    <link rel="stylesheet" type="text/css" href="/js/lib/sweetalter/sweetalert.css">
    <link rel="stylesheet" href="/css/edit.css"/>
</head>
<body>
<div class="container-fluid">
    <!-- 导航条 -->
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">后台管理系统</a>
                <span class="header_user">欢迎你, admin</span>
                <span class="header_exit"><a href="/exit">安全退出</a></span>
            </div>
        </div>
    </nav>
    <!--路径导航-->
    <ol class="breadcrumb">
        <li><a href="#">当前位置: </a></li>
        <li><a href="/">首页</a></li>
        <li class="active"><%= name %></li>
    </ol>
    <!--表单区域-->
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="title" class="col-sm-offset-2 col-sm-2 control-label">标题</label>

            <div class="col-sm-4">
                <input type="text" class="form-control" id="title" placeholder="标题">
            </div>
        </div>
        <div class="form-group">
            <label for="img" class="col-sm-offset-2 col-sm-2 control-label">图片URL</label>

            <div class="col-sm-4">
                <input type="text" class="form-control" id="img" placeholder="图片URL">
            </div>
        </div>
        <div class="form-group">
            <label for="url" class="col-sm-offset-2 col-sm-2 control-label">文章URL</label>

            <div class="col-sm-4">
                <input type="text" class="form-control" id="url" placeholder="文章URL">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-4">
                <button type="button" class="btn btn-success" id="addinfo_btn">提交数据</button>
            </div>
        </div>
    </form>
    <hr/>
    <!--表格区域-->
    <div class="container-table">
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th class="text-center">编号</th>
                <th class="text-center">ID</th>
                <th class="text-center">标题</th>
                <th class="text-center">图片URL</th>
                <th class="text-center">文章URL</th>
                <th class="text-center">时间</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody>
            <% for(var i in data){ %>
            <tr>
                <td title="<%= (parseInt(i) + 1) %>"><%= (parseInt(i) + 1) %></td>
                <td class="text-capitalize" title="<%= data[i].id %>"><%= data[i].id %></td>
                <td title="<%= data[i].title %>"><%= data[i].title %></td>
                <td title="<%= data[i].img %>" class="show-img">
                    <span class="img-url"><%= data[i].img %></span>
                    <a href="javascript:" i="<%= data[i].img %>"><img src="<%= data[i].img %>" alt="点击预览" title="点击预览"/></a>
                </td>
                <td title="<%= data[i].url %>"><%= data[i].url %></td>
                <td title="<%= data[i].time.substr(0, data[i].time.lastIndexOf("T")) %>" class="text-center"><%= data[i].time.substr(0, data[i].time.lastIndexOf("T")) %></td>
                <td class="text-center">
                    <input type="button" class="btn btn-danger btn-sm deleteHandler" value="删除" data-refId="<%= data[i].id %>"/>&nbsp;&nbsp;
                    <input type="button" class="btn btn-info btn-sm updateHandler" value="编辑" data-refId="<%= data[i].id %>"/>
                </td>
            </tr>
            </tbody>
            <% } %>
        </table>
        <!--分页-->
        <nav class="pagination-nav">
            <ul class="pagination">
                <!--1）如果总也等于1或者当前页数为一，上一页按钮不可点击-->
                <% if(totalPages == 1 || page == 1){ %>
                    <li class="disabled"><a>&laquo;</a></li>
                <% } else { %>
                    <li><a href="/edit/<%= type %>/<%= parseInt(page) - 1 %>">&laquo;</a></li>
                <% } %>
                <!--2）根据总条数循环生成多少个按钮-->
                <% for(var i = 1; i <= totalPages; i++){ %>
                    <!-- 3）根据后台返回的当前第几页，单独处理，设置样式-->
                    <% if(i == page){ %>
                        <li class="active"><a><%= i %></a></li>
                    <% }else{ %>
                        <li><a href="/edit/<%= type %>/<%= i %>"><%= i %></a></li>
                    <% } %>
                <% } %>
                <!--4）如果总也等于1或者当前页数等于总页数，下一页按钮不可点击-->
                <% if(totalPages == 1 || page == totalPages){ %>
                    <li class="disabled"><a>&raquo;</a></li>
                <% } else { %>
                    <li><a href="/edit/<%= type %>/<%= parseInt(page) + 1 %>">&raquo;</a></li>
                <% } %>
            </ul>
        </nav>
    </div>
</div>

<!--修改数据弹出的modal-->
<div class="modal fade" id="update-panel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                </button>
                <h4 class="modal-title">修改信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="update-form">
                    <div class="form-group">
                        <label for="update-title" class="col-sm-2 control-label">标题</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="update-title" placeholder="标题">
                            <!--隐藏的字段-->
                            <input type="hidden" id="update-id">
                            <input type="hidden" id="update-type">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="update-img" class="col-sm-2 control-label">图片URL</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="update-img" placeholder="图片URL">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="update-url" class="col-sm-2 control-label">文章URL</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="update-url" placeholder="文章URL">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="update-btn">保存</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/js/lib/jquery-2.2.3.min.js"></script>
<script src="/js/lib/bootstrap3.3.0/js/bootstrap.min.js"></script>
<script src="/js/lib/sweetalter/sweetalert.min.js"></script>
<script src="/js/lib/slide/js/simple.slide.js"></script>
<script type="text/javascript" src="/js/edit.js"></script>
</body>
</html>
